import React from "react";
import { Carousel, WingBlank } from "antd-mobile";
import store from "../../../store/wwj/index";
import { SET_PRODUCT, GETMAINPIC } from "../../../store/wwj/actionCreator";
import { Icon } from "antd-mobile";
import "../../../assets/wwj/rem.modules.css";

class Recommend extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      imgHeight: 120,
      banner: store.getState().Mainpic
    };
  }
  componentDidMount() {
    store.dispatch(SET_PRODUCT(3453543));
    store.dispatch(GETMAINPIC());
    setTimeout(() => {
      this.setState({
        data: [
          "http://p1.music.126.net/rrhtXzR9yMgQMVsuZV1doA==/109951164420147624.jpg",
          "http://p1.music.126.net/CyhsFCWLTiWhe46-3hdNkw==/109951164421902292.jpg",
          "http://p1.music.126.net/_bDetkCw492K93zT_2qvlQ==/109951164421521376.jpg",
          "http://p1.music.126.net/Z9t_6hrxK9feALa2hGbHQQ==/109951164421948775.jpg",
          "http://p1.music.126.net/vvx5lk6D-LSGd28iPsV10g==/109951164423037706.jpg",
          "http://p1.music.126.net/gfeslG_2ekckTQk92PYylg==/109951164421438049.jpg",
          "http://p1.music.126.net/olwubcbGmChgTiRAGXNt0g==/109951164421953872.jpg",
          "http://p1.music.126.net/6KGYsTjvtsC0aLYh06Mm5Q==/109951164423093696.jpg"
        ]
      });
    }, 100);
  }
  sendindex(index) {
    let a = store.getState().Product[index];
    localStorage.setItem("songdata", JSON.stringify(a));
    this.props.history.push("/detail");
  }
  render() {
    let product = store.getState().Product;
    return (
      <WingBlank>
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) =>
            console.log(`slide from ${from} to ${to}`)
          }
          afterChange={index => console.log("slide to", index)}
        >
          {this.state.data.map(val => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight
              }}
            >
              <img
                src={`${val}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </a>
          ))}
        </Carousel>
        <div
          style={{
            fontSize: "15px",
            fontWeight: "800",
            paddingBottom: "5px"
          }}
        >
          推荐歌单
        </div>
        <div className="main">
          {product.map((item, index) => {
            return (
              <div key={index} className="pic">
                <div className="pic1">
                  <img
                    className="pic2"
                    src={item.picUrl}
                    onClick={this.sendindex.bind(this, index)}
                  />
                  <div className="zuoshangjiao">
                    <Icon type="check" />
                    <span>{Math.floor(item.playCount / 10000) + "万"}</span>
                  </div>
                </div>
                <div className="pic3">{item.name}</div>
              </div>
            );
          })}
        </div>
      </WingBlank>
    );
  }
}

export default Recommend;
